<template>
  <div class="bigbox">
    <!-- 页面导航栏搜索 -->
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="60px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                       v-model="orgname"
                      :optionlist="qiyelist"
                      @updateModelValue="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="日期">
                  <el-date-picker
                    size="small"
                    v-model="value2"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="13" style="text-align: right;">
                <el-form-item label="">
                  <el-button @click="chongzhi"  size="small">重 置</el-button>
                  <el-button @click="chaxun" type="primary" size="small">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <!-- echart图表区域 -->
    <div class="echartbox" ref="echarts"></div>
    <!-- table表格区域 -->
    <div class="table">
      <div class="title">
        <div>电费收入</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="tablebox" style="height: 80%;">
        <TableColumn
        ref="tabledata"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :issize="issize">
      </TableColumn>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="getdatalist"
                :total="+totalCount">
          </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { gettablelistapi, getechartlistapi } from '@/api/prwpaid/report-forms/detail'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import * as echarts from 'echarts'
export default {
  name: 'CallPoliceInde',
  components: {
    TopTile,
    TableColumn
  },
  data () {
    return {
      issize: 'medium',
      orgname: '',
      value2: ['', ''],
      qiyelist: [],
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '建筑群名称', prop: 'buildingName' },
        { label: '开始日期', prop: 'stateDate', center: 'center' },
        { label: '结束日期', prop: 'endDate', center: 'center' },
        { label: '电费充值金额(元)', prop: 'chargeAccount', center: 'right' },
        { label: '电费退款金额(元)', prop: 'refundAccount', center: 'right' },
        { label: '财务收入(元)', prop: 'financeAccount', center: 'right' }
      ],
      totalCount: '',
      pageobj: {
        pageNo: 1,
        pageSize: 20
      }
    }
  },

  async mounted () {
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId)
    if (isBuildIdInArray) {
      this.orgname = localbuildingId || ''
    } else {
      this.orgname = ''
    }

    this.gettime()
    this.getecharts()
    this.getdatalist()
  },

  methods: {
    // 企业下拉
    changeqiye (val) {
      localStorage.setItem('buildingId', val)
    },
    // 查询
    chaxun () {
      this.getdatalist()
      this.getecharts()
    },
    // 重置
    chongzhi () {
      localStorage.removeItem('buildingId')
      this.value2 = ['', '']
      this.orgname = ''
      this.gettime()
      this.chaxun()
    },
    // 获取表格数据
    async getdatalist () {
      this.$refs.tabledata.loading = true
      const { data: { list, totalCount } } = await gettablelistapi({
        buildingId: this.orgname,
        pageNo: this.pageobj.pageNo - 1,
        pageSize: this.pageobj.pageSize,
        startDate: this.value2[0],
        endDate: this.value2[1]
      })
      this.tableData = list
      this.totalCount = totalCount
      this.$refs.tabledata.loading = false
    },
    // 导出
    daochu () {
      exportexcel('mbm-microservice-biz/mbm/report/fee/charge/exportExcel', {
        buildingId: this.orgname, startDate: this.value2[0], endDate: this.value2[1]
      }, '电费收入报表')
    },
    // 刷新
    shuaxin () {
      this.getdatalist()
      this.$message.success('数据刷新成功')
    },
    // 调节表格密度
    command (val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    async getecharts () {
      const { data: { list } } = await getechartlistapi({
        buildingId: this.orgname, startDate: this.value2[0], endDate: this.value2[1]
      })
      const datelist = list.map(ele => ele.date)
      const refundlist = list.map(ele => ele.refund)
      const financelist = list.map(ele => ele.finance)
      const rechargelist = list.map(ele => ele.recharge)
      const chartDom = this.$refs.echarts
      const myChart = echarts.init(chartDom)
      let option
      option = {
        grid: {
          containLabel: true,
          bottom: '5%',
          top: '15%',
          left: '2%',
          right: '2%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '5%',
          right: 'center',
          data: ['财务收入', '电费充值金额', '电费退款金额']
        },
        xAxis: {
          // name: "班级",
          triggerEvent: true,
          data: datelist,
          axisTick: {
            show: true // 坐标轴刻度
          }
        },
        yAxis: [
          {
            name: '(元)',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#ccc'
              }
            },
            axisLine: {
              show: true
            }
          }
        ],
        series: [
          {
            name: '财务收入',
            type: 'bar',
            silent: true,
            itemStyle: {
              normal: {
                color: '#2F8FFF'
              }
            },

            data: financelist
          },
          {
            name: '电费充值金额',
            type: 'bar',
            silent: true,
            itemStyle: {
              normal: {
                color: '#e6b75d'
              }
            },
            data: rechargelist
          },
          {
            name: '电费退款金额',
            type: 'bar',
            silent: true,
            itemStyle: {
              normal: {
                color: '#c78ae6'
              }
            },
            data: refundlist
          }
        ]
      }
      option && myChart.setOption(option)
    },
    // 获取当前时间戳
    gettime () {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value2 = []
      this.value2.push(year + '-' + month + '-' + '01')
      this.value2.push(year + '-' + month + '-' + day)
    }
  }
}
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding: 20px;
      margin-bottom: 10px;
  }
  .echartbox{
    height: 320px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .table{
    height: calc(100% - 420px);
    background-color: #fff;
    padding: 20px;
    .title{
      margin-bottom: 10px;
      display:flex;
      justify-content:space-between;
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>